<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>车管所修改</title>
    <link href="../../layui/css/layui.css" rel="stylesheet">
    <link href="../../static/css/style.css" rel="stylesheet">
    <script src="../../static/js/jquery.min.js"></script>
    <script src="../../static/js/base.js"></script>
    <script src="../../static/js/ax.js"></script>
    <script src="../../static/js/jquery.cookie.js"></script>
    <!--[if lt IE 9]>
    <script src="../../static/js/html5.js"></script>
    <script src="../../static/js/respond.js"></script>
    <![endif]-->

</head>
<body class="bg_w">

<div class="layui-fluid">
    <div class="layui-card-body">
        <form class="layui-form" action="">
            <div class="layui-row layui-col-space10 layui-form-item">

                <div class="layui-col-md4">
                    <label class="layui-form-label">省份：</label>
                    <div class="layui-input-block">
                        <select name="provinceId" id="provinceId" lay-verify="required" lay-filter="aihao" disabled>
                        </select>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <label class="layui-form-label">市辖：</label>
                    <div class="layui-input-block">
                        <select name="cityId" id="cityId" lay-verify="required" lay-filter="aihao" disabled>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-col-space10 ">
                <div class="layui-row ">

                    <label class="layui-form-label">对应分所：</label>
                    <div class="layui-input-block">
                        <a class="layui-btn add_btn" id="add">
                            <i class="layui-icon">&#xe608;</i> 添加
                        </a>
                    </div>

                </div>
            </div>


            <div class="layui-form-item cgs-list" id="cgs_addlist">


            </div>

            <div class="layui-form-item layui-col-space10">
                <div class="layui-input-block">
                    <button class="layui-btn add_btn" lay-submit lay-filter="component-form-element">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="../../layui/layui.js"></script>
</body>

<script>
    var provinceId=0;
    var cityId=0;
    $(function () {
        var id=getQueryString("cityId");
        ax.post({
            type: 'POST',
            url:schoolWebUrl+'/api/division/info',
            autoPrefix: false,
            contentType: "application/x-www-form-urlencoded",
            data: {"cityId":id},
            success: function (r) {
                provinceId=r.data[0].provinceId;
                    cityId=r.data[0].cityId;
             /*   $("#provinceId").val(provinceId);
                $("#cityId").val(cityId);*/
                for (var i = 0; i < r.data.length; i++) {
                    $('#cgs_addlist').append('<div class="cgsaddlist layui-row layui-col-space10">\n' +
                        '                    <div class="layui-col-sm4">\n' +
                        '                        <label class="layui-form-label">分所代码：</label>\n' +
                        '                        <div class="layui-input-block">\n' +
                        '                            <input type="text" name="code" value=' + r.data[i].code + '   autocomplete="off" class="layui-input code">\n' +
                        '                            <input type="hidden" class="divisionId" value=' + r.data[i].id + ' >\n' +
                        '                        </div>\n' +
                        '                    </div>\n' +
                        '                    <div class="layui-col-sm4">\n' +
                        '                        <label class="layui-form-label">分所名称：</label>\n' +
                        '                        <div class="layui-input-block">\n' +
                        '                            <input type="text" name="name" value=' + r.data[i].name + ' autocomplete="off" class="layui-input name">\n' +
                        '                        </div>\n' +
                        '                    </div>\n' +
                        '                    <div class="layui-col-sm4">\n' +
                        '\n' +
                        '\n' +
                        '                        <button class="layui-btn layui-btn-danger remover_btn mleft deleteDivision">\n' +
                        '                            删除\n' +
                        '                        </button>\n' +
                        '\n' +
                        '                    </div>\n' +
                        '\n' +
                        '                </div>');
                    $('#cgs_addlist .remover_btn').bind('click', function () {
                        var id = $(this).parents('.cgsaddlist').find('.divisionId').val();
                        layer.confirm('真的删除这行数据么?', function (index) {
                            var postData = {"id": id};
                            ax.post({
                                type: 'POST',
                                url: schoolWebUrl+'/api/division/delete',
                                contentType: "application/x-www-form-urlencoded",
                                data: postData,
                                success: function (r) {
                                    layer.close(index);
                                    layer.alert(r.message);
                                },
                            });
                        });
                        $(this).parents('.cgsaddlist').remove();
                    });
                }

                //获取省
                ax.post({
                    url: schoolWebUrl+'/api/captcha/getRegionProvince',
                    contentType: "application/x-www-form-urlencoded",
                    data:"",
                    success: function (r) {
                        for(var i=0;i<r.data.length;i++){
                            if(r.data[i].code==provinceId){
                                $("#provinceId").append(' <option value='+r.data[i].code+'  selected disabled>'+r.data[i].name+'</option>');
                            }else{
                                $("#provinceId").append(' <option value='+r.data[i].code+'disabled>'+r.data[i].name+'</option>');
                            }
                        }
                        ax.post({
                            url: schoolWebUrl+'/api/captcha/getRegionCode',
                            contentType: "application/x-www-form-urlencoded",
                            data:{"code": provinceId},
                            success: function (r) {
                                for(var i=0;i<r.data.length;i++){
                                    if(r.data[i].code==cityId){
                                        $("#cityId").append(' <option value='+r.data[i].code+'   disabled selected>'+r.data[i].name+'</option>');
                                    }else{
                                        $("#cityId").append(' <option value='+r.data[i].code+'disabled>'+r.data[i].name+'</option>');
                                    }
                                }
                                layui.form.render('select');
                            },
                        });
                      //  layui.form.render();
                    },
                });




                },
        });
    })


    $('#add').on('click', function () {
        addRow();
    });


    function addRow() {
        $('#cgs_addlist').append('<div class="cgsaddlist layui-row layui-col-space10">\n' +
            '                    <div class="layui-col-sm4">\n' +
            '                        <label class="layui-form-label">分所代码：</label>\n' +
            '                        <div class="layui-input-block">\n' +
            '                            <input type="text" name="code" placeholder="请输入分所代码" autocomplete="off" class="layui-input code">\n' +
            '                            <input type="hidden" class="divisionId">\n' +
            '                        </div>\n' +
            '                    </div>\n' +
            '                    <div class="layui-col-sm4">\n' +
            '                        <label class="layui-form-label">分所名称：</label>\n' +
            '                        <div class="layui-input-block">\n' +
            '                            <input type="text" name="name" placeholder="请输入分所名称" autocomplete="off" class="layui-input name">\n' +
            '                        </div>\n' +
            '                    </div>\n' +
            '                    <div class="layui-col-sm4">\n' +
            '\n' +
            '\n' +
            '                        <button class="layui-btn layui-btn-danger remover_btn mleft">\n' +
            '                            删除\n' +
            '                        </button>\n' +
            '\n' +
            '                    </div>\n' +
            '\n' +
            '                </div>');
        $('#cgs_addlist .remover_btn').bind('click', function () {
            var id = $(this).parents('.cgsaddlist').find('.divisionId').val();
            layer.confirm('真的删除这行数据么?', function (index) {
                var postData = {"id": id};
                ax.post({
                    type: 'POST',
                    url: schoolWebUrl+'/api/division/delete',
                    contentType: "application/x-www-form-urlencoded",
                    data: postData,
                    success: function (r) {
                        layer.close(index);
                        layer.alert(r.message);
                    },
                });

            });
            $(this).parents('.cgsaddlist').remove();
        });
    }

    var table;
    layui.use(['table', 'form', 'laydate', 'layer', 'upload'], function () {
        table = layui.table;
        var form = layui.form,
            laydate = layui.laydate,
            layer = layui.layer,
            upload = layui.upload,
            $ = layui.jquery;

        //常规用法
        laydate.render({
            elem: '#activeTime'
            , range: true
        });

        //监听提交
        form.on('submit(component-form-element)', function (data) {
            var provinceId = data.field.provinceId;
            var cityId = data.field.cityId;
            var postData = [];
            var j = 0;
            $.each($('#cgs_addlist .cgsaddlist'), function (i, n) {
                var code = $('.code').eq(i).val();
                var name = $('.name').eq(i).val();
                var id = $('.divisionId').eq(i).val();
                if (code == "" || name == "") {
                    layer.msg("请填写完成");
                    return;
                }
                postData[j++] = {
                    id: id,
                    cityId: cityId,
                    provinceId: provinceId,
                    code: code,
                    name: name,
                }
            });
            var index = layer.load(0, {shade: false});
            ax.post({
                type: 'POST',
                url: schoolWebUrl+'/api/division/update',
                contentType: "application/json",
                data: JSON.stringify(postData),
                success: function (data) {
                    layer.alert(data.message);
                    layer.close(index);
                    if (data.code == 0) {
                        //刷新父页面
                        setTimeout( function(){
                            topFrame.location.reload();
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                        }, 2 * 1000 );//延迟2000毫米
                    }
                },
            });
            return false;
        });
    });

</script>
</html>